<template>
	<view class="tags">
		<text v-for="item of tag" :key="item.id" :class="['tag pb-10', active === item.id ? 'activeText' : '', item.id === 0 ? 'mr-50' : '']" @click="onActive(item.id)">{{ item.title }}</text>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	
	const emits = defineEmits(['onValue'])
	
	const active = ref(0)
	const tag = reactive([
		{
			title: '验证码登录',
			id: 0
		},
		{
			title: '密码登录',
			id: 1
		}
	])
	
	const onActive = e => {
		active.value = e
		emits('onValue', e)
	}
</script>

<style lang="scss" scoped>
.tags {
	.tag {
		border-bottom: 6rpx solid #fff;
		font: {
			size: 28rpx;
		}
		&.activeText {
			font: {
				weight: bold;
			}
			border-color: #5F85FF;
		}
	}
}
</style>
